<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://purl.org/NET/erdf/profile">
 <title>Jx.Grid Editor Test Page</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <link rel="stylesheet" type="text/css" href="lib/themes/crispin/jxtheme.css" />

<script type="text/javascript" src="../../lib/mootools-core.js"></script>
<script type="text/javascript" src="../../lib/mootools-more.js"></script>
<script type="text/javascript" src="../../lib/jxlib.standalone.uncompressed.js"></script>
<script src="js/tests.js" type="text/javascript" charset="utf-8"></script>
<script src="js/locale.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var grid;
var panel;
var aboutDialog;
var prelighter;
var selector;
var sorter;
var resizer;
var editor;
var editorOptions;

window.addEvent('load', function() {

    prelighter = new Jx.Plugin.Grid.Prelighter({});
    selector = new Jx.Plugin.Grid.Selector({});
    sorter = new Jx.Plugin.Grid.Sorter({});
    resizer = new Jx.Plugin.Grid.Resize({});

    grid = drawGrid();
    drawToolbar();

    window.addEvent('stylesheetChanged', function() {
        if (aboutDialog && aboutDialog.chrome) {
            aboutDialog.close();
            aboutDialog.chrome.dispose();
            aboutDialog.chrome = null;
        }
    });

});
if($(document).getElements('.tabContentActiveExamples').length > 0) {
  $(document).getElements('.tabContentActiveExamples')[0].addEvent('loadAjax', function() {

      prelighter = new Jx.Plugin.Grid.Prelighter({});
      selector = new Jx.Plugin.Grid.Selector({});
      sorter = new Jx.Plugin.Grid.Sorter({});
      resizer = new Jx.Plugin.Grid.Resize({});

      grid = drawGrid();
      drawToolbar();

      window.addEvent('stylesheetChanged', function() {
          if (aboutDialog && aboutDialog.chrome) {
              aboutDialog.close();
              aboutDialog.chrome.dispose();
              aboutDialog.chrome = null;
          }
      });

  });
}
</script>
<script id="toolbarEditorScript" type="text/javascript">
function drawToolbar() {
    /* this sets up some options for controlling the grid via
     * a menu and then creates a panel to host the grid in
     * The actual grid code is in another sample
     */
    new Jx.Menu({label: 'Row Options'}).addTo('buttonsEditor').add([
        new Jx.Menu.Item({
            label: 'Row Prelight',
            toggle: true,
            onDown: function() { prelighter.activate('row'); },
            onUp: function() { prelighter.deactivate('row'); }
        }),
        new Jx.Menu.Item({
            label: 'Row Header Prelight',
            toggle: true,
            onDown: function() { prelighter.activate('rowHeader'); },
            onUp: function() { prelighter.deactivate('rowHeader'); }
        }),
        new Jx.Menu.Item({
            label: 'Row Selection',
            toggle: true,
            onDown: function() { selector.activate('row'); },
            onUp: function() { selector.deactivate('row'); }
        })]
    );
    new Jx.Menu({label: 'Column Options'}).addTo('buttonsEditor').add([
        new Jx.Menu.Item({
            label: 'Column Resize',
            toggle: true,
            onDown: function() { resizer.activate('column'); },
            onUp: function() { resizer.deactivate('column'); }
        }),
        new Jx.Menu.Item({
            label: 'Column Prelight',
            toggle: true,
            onDown: function() { prelighter.activate('column'); },
            onUp: function() { prelighter.deactivate('column'); }
        }),
        new Jx.Menu.Item({
            label: 'Column Header Prelight',
            toggle: true,
            onDown: function() { prelighter.activate('columnHeader'); },
            onUp: function() { prelighter.deactivate('columnHeader'); }
        }),
        new Jx.Menu.Item({
            label: 'Column Selection',
            toggle: true,
            onDown: function() { selector.activate('column'); },
            onUp: function() { selector.deactivate('column'); }
        }),
        new Jx.Menu.SubMenu({
            label: 'Columns Editable'
        }).add([
          new Jx.Menu.Item({
              label: 'Name',
              toggle: true,
              active: true,
              onDown: function() { grid.columns.getByName('name').options.isEditable = true },
              onUp: function() { grid.columns.getByName('name').options.isEditable = false }
          }),
          new Jx.Menu.Item({
              label: 'Date of Birth',
              toggle: true,
              active: false,
              onDown: function() { grid.columns.getByName('dob').options.isEditable = true },
              onUp: function() { grid.columns.getByName('dob').options.isEditable = false }
          }),
          new Jx.Menu.Item({
              label: 'Active?',
              toggle: true,
              active: true,
              onDown: function() { grid.columns.getByName('active').options.isEditable = true },
              onUp: function() { grid.columns.getByName('active').options.isEditable = false }
          }),
          new Jx.Menu.Item({
              label: 'Dues Left',
              toggle: true,
              active: true,
              onDown: function() { grid.columns.getByName('duesLeft').options.isEditable = true },
              onUp: function() { grid.columns.getByName('duesLeft').options.isEditable = false }
          }),
          new Jx.Menu.Item({
              label: 'Website',
              toggle: true,
              active: true,
              onDown: function() { grid.columns.getByName('url').options.isEditable = true },
              onUp: function() { grid.columns.getByName('url').options.isEditable = false }
          }),
          new Jx.Menu.Item({
              label: 'Home Phone',
              toggle: true,
              active: true,
              onDown: function() { grid.columns.getByName('phone').options.isEditable = true },
              onUp: function() { grid.columns.getByName('phone').options.isEditable = false }
          })
        ])
      ]
    );
    new Jx.Menu({label: 'Cell Options'}).addTo('buttonsEditor').add([
        new Jx.Menu.Item({
            label: 'Cell Prelight',
            toggle: true,
            active: true,
            onDown: function() { prelighter.activate('cell'); },
            onUp: function() { prelighter.deactivate('cell'); }
        }),
        new Jx.Menu.Item({
            label: 'Cell Selection',
            toggle: true,
            onDown: function() { selector.activate('cell'); },
            onUp: function() { selector.deactivate('cell'); }
        })]
    );
    new Jx.Menu({label: 'Inline Editor Options'}).addTo('buttonsEditor').add([
        new Jx.Menu.Item({
            label: 'Enable Inline Editing',
            toggle: true,
            active: true,
            onDown: function() { editor.enable(); },
            onUp: function() { editor.disable(); }
        }),
        new Jx.Menu.Item({
            label: 'Close On Blur',
            toggle: true,
            active: editorOptions.blurDelay,
            onDown: function() { editor.options.blurDelay = 500; },
            onUp: function() { editor.options.blurDelay = false; }
        }),
        new Jx.Menu.Item({
            label: 'Field Validation',
            toggle: true,
            active: editorOptions.validate,
            onDown: function() { editor.options.validate = true; },
            onUp: function() { editor.options.validate = false; }
        }),
        new Jx.Menu.Item({
            label: 'Field Formatted',
            toggle: true,
            active: editorOptions.fieldFormatted,
            onDown: function() { editor.options.fieldFormatted = true; },
            onUp: function() { editor.options.fieldFormatted = false; }
        }),
        new Jx.Menu.Item({
            label: 'Keyboard Support',
            toggle: true,
            active: editorOptions.useKeyboard,
            onDown: function() { editor.options.useKeyboard = true; },
            onUp: function() { editor.options.useKeyboard = false; }
        }),
        new Jx.Menu.Item({
            label: '',
            toggle: true,
            active: editorOptions.useKeyboard,
            onDown: function() { editor.options.useKeyboard = true; },
            onUp: function() { editor.options.useKeyboard = false; }
        }),
        new Jx.Menu.SubMenu({
            label: 'PopUp Options'
        }).add([
          new Jx.Menu.Item({
              label: 'Input Field only',
              toggle: true,
              active: !editorOptions.popup.use,
              onDown: function() { editor.options.popup.use = false; },
              onUp: function() { editor.options.popup.use = true; }
          }),
          new Jx.Menu.Item({
              label: 'PopUp Label',
              toggle: true,
              active: editorOptions.popup.useLabels,
              onDown: function() { editor.options.popup.useLabels = true; },
              onUp: function() { editor.options.popup.useLabels = false; }
          }),
          new Jx.Menu.Item({
              label: 'PopUp Use Buttons',
              toggle: true,
              active: editorOptions.popup.useButtons,
              onDown: function() { editor.options.popup.useButtons = true; },
              onUp: function() { editor.options.popup.useButtons = false; }
          })
        ])
      ]
    );
    aboutDialog = null;
    new Jx.Button({
        label: 'About',
        onClick: function() {
            if (!aboutDialog) {
                aboutDialog = new Jx.Dialog({
                    label: 'About',
                    contentURL: 'grid_about.html',
                    width: 600,
                    height: 400,
                    modal: true
                });
            }
            aboutDialog.show();
        }
    }).addTo('buttonsEditor');

}
</script>
<script id="gridEditorScript" type="text/javascript">
  function drawGrid() {
    var model = ([
        {'id':1,'name':'Yay Super','dob':'12/4/1974','active':'true','duesLeft':2,'url':'http://www.google.com','phone':'16753780987'},
        {'id':2,'name':'Bill Clinton','dob':'8/4/1987','active':'false','duesLeft':0,'url':'http://www.microsoft.com','phone':'867-465-3686'},
        {'id':3,'name':'Joe Black','dob':'5/25/1963','active':true,'duesLeft':10,'url':'http://www.yahoo.com','phone':'1(857) 467-9847'},
        {'id':4,'name':'Betty White','dob':'6/3/1979','active':true,'duesLeft':45,'url':'http://www.jxlib.org','phone':'2748467384'},
        {'id':5,'name':'Greg Little','dob':'5/3/1993','active':false,'duesLeft':19.89,'url':'http://www.mootools.net','phone':'9676574583'},
        {'id':6,'name':'Andrew long','dob':'7/19/1982','active':true,'duesLeft':15,'url':'http://www.netvibes.com','phone':'5679857865'},
        {'id':7,'name':'Jason Lee','dob':'4/13/1977','active':false,'duesLeft':14,'url':'http://www.ajaxian.com','phone':'9786456753'},
        {'id':8,'name':'Elizabeth Freeman','dob':'7/3/1994','active':true,'duesLeft':5,'url':'http://www.smashingmagazine.com','phone':'9567563426'},
        {'id':9,'name':'Bob Red','dob':'8/5/1972','active':true,'duesLeft':74,'url':'http://www.jquery.org','phone':'2637485769'},
        {'id':10,'name':'Russel Stover','dob':'9/10/1969','active':'false','duesLeft':65,'url':'http://www.sourceforge.net','phone':'8474657839'},
        {'id':11,'name':'Granny Smith','dob':'10/28/1985','active':'true','duesLeft':0,'url':'http://www.gametrailers.com','phone':'6748485948'},
        {'id':12,'name':'Reba Butterworth','dob':'11/11/1989','active':true,'duesLeft':0,'url':'http://www.metro.tokyo.jp/ENGLISH/','phone':'7584985767'},
        {'id':13,'name':'Frank Gillis','dob':'2/3/1976','active':'true','duesLeft':5,'url':'http://www.alistapart.com','phone':'4758693094'}
    ]);

    var parser = new Jx.Store.Parser.JSON();
    var full = new Jx.Store.Strategy.Full();
    var sort = new Jx.Store.Strategy.Sort({sortOnStoreEvents: null});

    var store = new Jx.Store({
      columns: [
        {name: 'id',       type: 'numeric'},
        {name: 'name',     type: 'alphanumeric'},
        {name: 'dob',      type: 'date'},
        {name: 'active',   type: 'boolean'},
        {name: 'duesLeft', type: 'currency'},
        {name: 'url',      type: 'alphanumeric'},
        {name: 'phone',    type: 'alphanumeric'}
      ],
      protocol: new Jx.Store.Protocol.Local(model,{parser: parser}),
      strategies: [full,sort],
      record: Jx.Record
    });
    /*
      var currencyFormatter = new Jx.Formatter.Currency();
      var dateFormatter = new Jx.Formatter.Date();
      var booleanFormatter = new Jx.Formatter.Boolean();
  */
    //setup options
    var options = {
        parent: 'gridAreaEditor',
        row: {
          useHeaders: true,
          alternateRowColors: true,
          headerField: 'id'
        },
        columns: {
          headerRowHeight: 20,
          useHeaders: true,
          columns: [{
            renderMode: 'fit',
            header: 'Id',
            modelField: 'id',
            name: 'id',
            isEditable: true,
            isSortable: true,
            isResizable: true,
            dataType: 'numeric'
          },{
            renderMode: 'fit',
            header: 'Name',
            modelField: 'name',
            name: 'name',
            isEditable: true,
            isSortable: true,
            isResizable: true,
            validate: true,
            dataType: 'alphanumeric'
          },{
            renderMode: 'expand',
            header: 'Date of Birth',
            modelField: 'dob',
            name: 'dob',
            isEditable: false,
            isSortable: true,
            isResizable: true,
            validate: true,
            dataType: 'date',
            renderer: {
              name : 'Text',
              options: {
                textTemplate: '{dob}',
                formatter: {
                  name : 'Date'
                }
              }
            }
          },{
            renderMode: 'fit',
            header: 'Active?',
            modelField: 'active',
            name: 'active',
            isEditable: false,
            isSortable: true,
            isResizable: true,
            validate: true,
            dataType: 'boolean'
          },{
            renderMode: 'fit',
            header: 'Dues Left',
            modelField: 'duesLeft',
            formatter: null,
            name: 'duesLeft',
            isEditable: true,
            isSortable: true,
            isResizable: true,
            dataType: 'numeric'
          },{
            renderMode: 'fit',
            header: 'Website',
            modelField: 'url',
            name: 'url',
            isEditable: true,
            isSortable: true,
            isResizable: true,
            dataType: 'alphanumeric',
            fieldFormatted : false,
            renderer: {
              name: 'text',
              options: {
                textTemplate: '{url}',
                formatter: {
                  name:'Uri',
                  options: {}
                }
              }
            }
          },{
            template: '<span class="jxGridCellContent">Home Phone</span>',
            renderMode: 'fit',
            header: 'Home Phone',
            modelField: 'phone',
            name: 'phone',
            isEditable: true,
            isSortable: true,
            isResizable: true,
            dataType: 'alphanumeric',
            renderer: {
              name : 'text',
              options: {
                textTemplate : '{phone}',
                formatter: {
                  name:'Phone',
                  options: {}
                }
              }
            }
          }
         ]
        },
        model: store
    };
    //create grid
    var grid = new Jx.Grid(options);
    editorOptions = {
      validate   : true,
      blurDelay  : Browser.Engine.webkit ? false : 250,
      popup      : {
        use: true,
        useButtons : false
      },
      fieldOptions : [
        {
          field   : 'name',
          type    : 'Text',
          validatorOptions: {
            validators : ['minLength:4'],
            validateOnBlur: true,
            validateOnChange : false
          }
        },
        {
          field   : 'dob',
          type    : 'Text',
          validatorOptions: {
            validators : ['validate-date'],
            validateOnBlur: true,
            validateOnChange : true
          }
        },
        {
          field   : 'active',
          type    : 'Select',
          options : {
            comboOpts: [
              { value: 'true',  text: {set:'Jx',key:'formatter.boolean',value:'true'} },
              { value: 'false', text: {set:'Jx',key:'formatter.boolean',value:'false'} }
            ]
          }
        },
        {
          field   : 'duesLeft',
          type    : 'Select',
          options : {
            optGroups: [
              {
                name : 'Dues < 5',
                options: [
                  {value: 0, text: '0'},
                  {value: 1, text: '1'},
                  {value: 2, text: '2'},
                  {value: 3, text: '3'},
                  {value: 4, text: '4'}
                ]
              },
              {
                name : 'Dues >= 5',
                options: [
                  {value: 5, text: '5'},
                  {value: 6, text: '6'},
                  {value: 7, text: '7'},
                  {value: 8, text: '8'},
                  {value: 9, text: '9'},
                  {value:10, text: '10'}
                ]
              }
            ]
          }
        },
        {
          field   : 'url',
          type    : 'Textarea'
        }
      ],
      fieldFormatted : true,
      useKeyboard : true,
      cellChangeFx : {
        //use : false
      },
      keys : {
        'ctrl+d' : 'cancelNGoDiagonal',
        'alt+s'  : 'saveNClose'
      },
      keyboardMethods: {
        'cancelNGoDiagonal' : function(ev){
          ev.preventDefault();
          this.getNextCellInRow(false);
          this.getNextCellInCol(false);
        }
      }
    };

    editor = new Jx.Plugin.Grid.Editor(editorOptions);

    store.addEvent('storeDataLoaded', function () {
      grid.render();
      prelighter.attach(grid);
      selector.attach(grid);
      sorter.attach(grid);
      resizer.attach(grid);
      editor.attach(grid);
    });
    store.load();
    return grid;

  }
</script>

<style type="text/css">
	div.gridBox { }
</style>

<script type="text/javascript">

</script>
</head>
<body>
    <h1>Jx.Grid Example with Inline Editor Plugin</h1>

    <p>API Reference: <a id="grid-js" href="javascript:void();" title="link to API Reference">Jx.Grid</a></p>
    <p>This example demonstrates some basic and advanced ways of using Jx.Grid including the Inline Editor Plugin.</p>
    <h2 id="toolbarEditor">Grid Options</h2>
    <p>There are a number of options for configuring a grid, try them out by using the menus to turn various options on and off.</p>
    <h2 id="gridEditor">The Grid</h2>
    <p>The grid itself has a lot of options when you first construct it, for this example most of the options are turned off so we can use the menus to demonstrate the effect of turning them on and off.</p>
    <p>The grid component uses an architecture that requires a separate object to provide the data to the grid through a specific api.  This object is called the model for the grid.  The grid allows the model to be changed at any time and the grid will redraw itself with the new model's data.</p>

    <p>The editor plugin allows the user to control it only using the keyboard with some common shortcuts.</p>
	<div id="buttonsEditor" class="buttonBox"></div>
	<div id="gridAreaEditor" class="gridBox"></div>

</body>
</html>